<nz-modal
  [nzWidth]="560"
  [(nzVisible)]="visible"
  [nzTitle]="detail ? '编辑' : '新增'"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
  [nzOkLoading]="uploading"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>网站名称</nz-form-label>
        <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
          <input formControlName="title" nz-input placeholder="发现导航" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>网站链接</nz-form-label>
        <nz-form-control [nzSpan]="20" nzErrorTip="请输入网站链接">
          <input formControlName="url" nz-input placeholder="https://nav3.cn" (blur)="onUrlBlur($event)" />
        </nz-form-control>
      </nz-form-item>

      <div class="row">
        <div class="col">
          <nz-form-item>
            <nz-form-label [nzSpan]="15" nzRequired>快捷方式</nz-form-label>
            <nz-form-control [nzSpan]="9">
              <nz-switch formControlName="top"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div class="col">
          <nz-form-item>
            <nz-form-label [nzSpan]="15" nzRequired>仅自己可见</nz-form-label>
            <nz-form-control [nzSpan]="9">
              <nz-switch formControlName="ownVisible"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div class="col">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">推荐指数</nz-form-label>
            <nz-form-control [nzSpan]="24">
              <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIconSearch">
            <input
              formControlName="icon"
              nz-input
              placeholder="支持将截图或复制图片粘贴此处上传"
              (blur)="onIconBlur($event)"
              (focus)="onIconFocus($event)"
            />
          </nz-input-group>

          <ng-template #prefixIcon>
            <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
          </ng-template>
          <ng-template #suffixIconSearch>
            <i nz-icon nzType="loading" nzTheme="outline" *ngIf="uploading; else loading"></i>
            <ng-template #loading>
              <label id="file">
                <i nz-icon nzType="upload" nzTheme="outline" class="cursor-pointer" title="上传"></i>
                <input
                  type="file"
                  name="file"
                  (change)="onChangeFile($event)"
                  accept="image/*"
                  class="file-upload"
                >
              </label>
            </ng-template>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">网站描述</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <textarea
            formControlName="desc"
            placeholder="发现导航, 精选实用导航网站"
            nz-input
            [nzAutosize]="{ minRows: 3, maxRows: 5 }"
          >
          </textarea>
        </nz-form-control>
      </nz-form-item>

      <!-- more url -->
      <div>
        <nz-form-item *ngFor="let n of urlArr; let idx = index">
          <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
              <input [formControlName]="'url' + idx" type="text" nz-input />
            </nz-input-group>
            <ng-template #addOnBeforeTemplate>
              <nz-select style="width: 100px;" [formControlName]="'tagVal' + idx">
                <nz-option
                  *ngFor="let tag of tags"
                  [nzLabel]="tag"
                  [nzValue]="tag"
                >
                </nz-option>
              </nz-select>
            </ng-template>
            <ng-template #addOnAfterTemplate>
              <i
                class="cursor-pointer"
                nz-icon
                nzType="minus"
                nzTheme="outline"
                (click)="lessMoreUrl()"
              >
              </i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <nz-form-item *ngIf="tags.length > 0 && urlArr.length < 3">
        <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
        <nz-form-control [nzSpan]="20">
          <button nz-button nzType="default" nzBlock (click)="addMoreUrl()">
            <i nz-icon nzType="plus"></i>继续添加关联链接
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
